<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="height=device-height, initial-scale=1.0">
    <title>大屏数据可视化平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>
<body>
    <!--header-->
    <header>
        <h1>千锋🤝美团项目数据统计</h1>
        <span>2022年3月22日13时57分42秒</span>
    </header>
    <!--header-->
    <!--main-->
    <div class="main">
        <div class="column">
            <div class="box left1" style="height:4rem"></div>
            <div class="box left2" style="height:2.6rem">
                <div class="alltitle">标题样式</div>
               <div class="navboxall">
                   <div class="wraptit">
                       <span>单号</span>
                       <span>金额</span>
                       <span>品名</span>
                       <span>时间</span>
                    </div>
                    <div class="wrap str_wrap str_vertical">
                        <div class="str_move str_origin" style="top: -504.78px;">
                            <ul class="str_ul">
                                <li>
                                    <p>
                                        <span>100021415</span>
                                        <span>199</span>
                                        <span>手机</span>
                                        <span>18小时</span>
                                    </p>
                                </li>
                                <li>
                                    <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li></ul><div class="str_move str_move_clone" style="top: 100%; bottom: auto; height: 360px;"><ul><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li></ul></div><div class="str_move str_move_clone" style="bottom: 100%; top: auto; height: 360px;"><ul><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li><li><p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p></li></ul></div></div></div></div>
            </div>
            <div class="box left3" style="height:2.6rem"></div>
        </div>
        <div class="column" >
            <div class="box center1" style="height:2.3rem;display:flex;">
                <div class="left" style="color:#fff;width:50%">
                    <h2 style="margin-bottom:.3rem;font-weight:100">总体情况<span>(单位：元)</span></h2>
                    <h1 style="font-size:1rem;color:yellow">193820</h1>
                </div>
                <div class="right" style="flex:1;display:flex;">
                    <div class="r1" style="width:33%"></div>
                    <div class="r2" style="width:33%"></div>
                    <div class="r3" style="width:33%"></div>
                    
                </div>
            </div>
            <div class="box center2" style="height:3.5rem"></div>
            <div class="box center3" style="height:3.4rem"></div>
        </div>
         <div class="column">
            <div class="box right1" style="height:3rem;color:rgba(255,255,255,.4);">
            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <th scope="col">排名</th>
                        <th scope="col">公司</th>
                        <th scope="col">数量</th>
                        <th scope="col">增长率</th>
                    </tr>
                    <tr>
                        <td><span>1</span></td>
                        <td>腾讯科技</td>
                        <td>114万<br></td>
                        <td>100%<br></td>
                    </tr>
                    <tr>
                        <td><span>2</span></td>
                        <td>百度公司</td>
                        <td>923823万</td>
                        <td>21%</td>
                    </tr>
                    <tr>
                        <td><span>3</span></td>
                        <td>新浪</td>
                        <td>1240253万</td>
                        <td>12%</td>
                    </tr>
                    <tr>
                        <td><span>4</span></td>
                        <td>网易</td>
                        <td>1.2亿</td>
                        <td>39%</td>
                    </tr>
                    <tr>
                        <td><span>5</span></td>
                        <td>雅虎</td>
                        <td>13423万</td>
                        <td>9%</td>
                    </tr>
                </tbody>
            </table>
            </div>
            <div class="box right2" style="height:3rem;color:rgba(255,255,255,.4);">
            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><th scope="col">排名</th><th scope="col">公司</th><th scope="col">数量</th><th scope="col">增长率</th></tr><tr><td><span>1</span></td><td>腾讯科技</td><td>114万<br></td><td>100%<br></td></tr><tr><td><span>2</span></td><td>百度公司</td><td>923823万</td><td>21%</td></tr><tr><td><span>3</span></td><td>新浪</td><td>1240253万</td><td>12%</td></tr><tr><td><span>4</span></td><td>网易</td><td>1.2亿</td><td>39%</td></tr><tr><td><span>5</span></td><td>雅虎</td><td>13423万</td><td>9%</td></tr></tbody></table></div>
            <div class="box right3" style="height:3.2rem"></div>
        </div>
    </div>
    <!--main-->
    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.zhimg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
     <script src="http://unpkg.com/echarts"></script> 
    <!--<script src="../echarts.js"></script>-->
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/left2.js"></script>
    <script src="./assets/js/left3.js"></script>
    <script src="./assets/js/cen1.js"></script>
    <script src="./assets/js/cen2.js"></script>
    <script src="./assets/js/cen3.js"></script>
    <script src="./assets/js/right3.js"></script>
    <script>
        setInterval(()=>{
            $("header span").html(wofDate.format('Y年m月d日H时i分s秒'))
        },1000)
    </script>
</body>
</html>

